<template>
	<Modal v-model="showTestPaper" title="试卷预览"  :width="1000" id="previewModal">
		<!--<Spin size="large" fix v-if="previewModal.loading"></Spin>-->
	<div class="test" ref="pdf" style="padding:0px 20px">
		<h2 style="margin: 0 auto;text-align: center;margin-bottom: 20px">{{this.examName}}</h2>
		<QuestionList :data="preQuestionList"  :showWriteUp="true" :showGrade="false"></QuestionList>
	</div>
	<div slot="footer">
		<Button @click="handleExport" type="primary" >下载pdf</Button>
	</div>
	</Modal>
</template>
<script>
	import { downloadPDF } from "@/libs/pdf.js";
	import html2canvas from 'html2canvas'
	import jsPDF from 'jspdf'
    import {getQuestionList,getQuesFile} from '@/api/exam'
	import{queryTestPaperQuestionList} from '@/api/testpaper'
	import QuestionList from '@/components/question-list'
    export default {
        name: 'examInfo',
        components:{QuestionList},
        data() {
            return {
	            showTestPaper:false,
                // 试卷分数
                examScore:0,
                examName:'',
                // 试卷题
                preQuestionList:[]
            }
        },
        filters: {
			difficultyFilter: (val) => {
				let difficultyStr = '';
				if(val) {
					val = val.toLowerCase();
				}
				switch(val) {
					case 'simple':
						difficultyStr = '简单';
						break;
					case 'commonly':
						difficultyStr = '一般';
						break;
					case 'medium':
						difficultyStr = '中等';
						break;
					case 'hard':
						difficultyStr = '较难';
						break;
				}
				return difficultyStr;
			},
			modeFilter: (val) => {
				let str = '';
				if(val) {
					let value =  +val
					switch(value) {
						case 1:
							str = '单选';
							break;
						case 2:
							str = '多选';
							break;
						case 3:
							str = '判断';
							break;
						case 4:
							str = '填空';
							break;
						case 5:
							str = '简答';
							break;
					}
				}
				return str;
			},
			filterIsPublic(type) {
				//1--单位  0--个人
				let status = '';
				if(type === 1 || type === '1') {
					status = '单位'
				} else if(type === 0 || type === '0') {
					status = '个人'
				}
				return status;
			}
		},
        created(){

        },
        mounted() {
        	
        },
        beforeDestroy() {

        },
        methods: {
		handleExport() {
			downloadPDF(this.$refs.pdf,this.examName);
		},
		// 	downloadReports(){
		// //    	this.disDownloadReport = true;
		// 		document.documentElement.scrollLeft = 0;
		// 		document.documentElement.scrollTop = 0;
		// 		let docs = document.getElementsByClassName("test");
		// 		let pdf = new jsPDF('p', 'pt', 'a4');
		// 		this.pageDataArr = [];
		// 		let proArr = Array.from(docs).map((doc,index) => {
		// 			return this.htmlToCanvas(doc,index);
		// 		})
		// 		Promise.all(proArr).then(data => {
		// 			for(let i = 0; i< this.pageDataArr.length;i++){
		// 				let contentWidth = data[0].width;
		// 				let contentHeight = data[0].height;
		// 				//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
		// 				let imgWidth = 595;
		// 				let imgHeight = 595 / contentWidth * contentHeight;
		// 				pdf.addImage(this.pageDataArr[i], 'JPEG', 0, 0, imgWidth, imgHeight);
		// 				if(i < docs.length - 1){
		// 					pdf.addPage();
		// 				}
		// 			}
		// 			setTimeout(() => {
		// 				pdf.save(this.USER_NAME + "学习评估报告.pdf");
		// //        		this.disDownloadReport = false;
		// 			},2000)
		// 		})
		// 	},
		// 	htmlToCanvas(doc,index){
		// 		return new Promise((resolve,reject) => {
		// 			const box = window.getComputedStyle(doc);
		// 			// 获取DOM 节点计算后宽高
		// 			const width = box.width.replace('px','')
		// 			const height = box.height.replace('px','')
		// 			// 获取像素比
		// 			console.log(window.devicePixelRatio);
		// 			const scaleBy = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1;
		// 			html2canvas(doc,{
		// 				scale:window.devicePixelRatio *2,
		// 				width,
		// 				height,
		// 				scrollX:0,
		// 				scrollY:0
		// 			}).then((canvas) => {
		// 			let pageData = canvas.toDataURL('image/jpeg', 1.0);
		// 	//		  console.log(index,pageData);
		// 			this.pageDataArr[index] = pageData;
		// 			resolve(canvas);
		// 			}).catch(error => {

		// 			})
		// 		})
		// 	},
        	openModal(id){
        		this.showTestPaper = true;
                this.getPaperDetailData(id);

            },
            //获取试卷题目
            getPaperDetailData(id){
                let _this = this;
                this.examList = []
                this.anId = []
				const newObj = {
					paperId:id
				}
                queryTestPaperQuestionList(newObj).then(res=>{
                    if(res.code===1){
                    	let getData = res.data;
						this.examScore = getData.totalScore;
                        this.examName = getData.paperName;
						let questionInfoList = getData.paperQuestion
						questionInfoList.forEach((item)=>{
							item.answerResult = item.showRight;
							item.explanation = item.description;
							let questionType = item.questionType.toString();
							if(questionType == '4'){
								item.modeCode = '6';//与题目的modeCode对应上:1-单选、2-多选、3-判断、4-填空、5-简答
							}else if(questionType == '5'){
								item.modeCode = '4';//与题目的modeCode对应上:1-单选、2-多选、3-判断、4-填空、5-简答
							}else if(questionType == '6'){
								item.modeCode = '5';//与题目的modeCode对应上:1-单选、2-多选、3-判断、4-填空、5-简答
							}else{
								item.modeCode = questionType;
							}
						})
						this.preQuestionList = questionInfoList;
                    }else{
                        _this.$Message.error(data.message)
                    }
                }).catch((err)=>{
                    
                })
            },
            cancel(){
                console.log('Cancel')
            },
            parseDescription(question) {
				if(!question.answers) {
					return;
				}
				let description;
				description = question.name.replace(/\{\{.*?\}\}/g, `<span class='quesBlank' disabled style='width:40px;padding:0px 5px;outline:none;box-shadow:none;border:none;border-bottom:1px solid rgb(168,166,200);color:#2d8cf0'></span>`);
				let el = document.createElement("div");
				el.innerHTML = description;
				let answersEle = el.getElementsByClassName('quesBlank');
				Array.from(answersEle).forEach((ele, index) => {
					answersEle[index].innerHTML = question.answers[index].explanation;
				});
				return el.innerHTML;
			},
        },
    }
</script>
<style scoped>
    
</style>
